<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

<%@ taglib uri="/WEB-INF/hexacta.tld" prefix="hexacta"%>

<%@ page import="java.util.Date"%>

<head>
<sx:head cache="true" />
<link rel="stylesheet" href="/hrs-intranet/styles/displaytag.css"
	type="text/css" />
</head>

<link type="text/css" href="/hrs-intranet/js/jquery/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/hrs-intranet/js/jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/hrs-intranet/js/jquery/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript" src="/hrs-intranet/js/cluetip/jquery.cluetip.js"></script>
<link type="text/css" href="/hrs-intranet/js/cluetip/jquery.cluetip.css" rel="stylesheet" />
	
<link rel="stylesheet" href="/hrs-intranet/styles/button.css" type="text/css" />

<s:include value="errorsSection.jsp"></s:include>	

<script type="text/javascript">
	var classToTable;

	function addAccrued(id){
		if(classToTable == null){
			classToTable = "even";
		}
		var table = $('#accruedList');
		table.find('tbody').append(
				'<tr class="'+classToTable+'" id="accruedRow">'+
					'<td width="5%">'+'<input id="year" type"text" maxlength="4" width="10%">'+'</td>'+
					'<td width="5%">'+'<input id="month" type"text" maxlength="2" width="10%">'+'</td>'+
					'<td>'+'<input id="earn" type"text" onblur="javascript: sumEarn()">'+'</td>'+
					'<td>'+'<input id="bill" type"text" onblur="javascript: sumBill()">'+'</td>'+
					'<td width="5%">'+'<input id="estimated" type="checkbox" onclick="javascript: checkEstimated(this);">'+'</td>'+
					'<td>'+'<input id="comment" type"text">'+'</td>'+
					'<td>'+''+'</td>'+
					'<td>'+'<label id="user" />'+'</td>'+
					'<td>'+'<label id="date" />'+'</td>'+
					'<td>'+'<s:a href="#" cssClass="Add" onclick="javascript: confirmUser(this);">Confirm</s:a>'+'</td>'+
					'<td>'+'<s:a href="#" cssClass="btn" onclick="javascript: removeRow(this);">Remove</s:a>'+'</td>'+
				'</tr>'
		);
		
		if(classToTable == "even"){
			classTotable = "odd";
		}else{
			classTotable = "even";
		}
	}
	
	function confirmUser(id){
		var row = id.parentNode.parentNode;
		var estimated = row.cells[4].firstChild;
		estimated.disabled = true;
		var user = row.cells[7].firstChild;
		var userName = document.getElementById("loggedUser").value;
		var userId = document.getElementById("loggedUserId").value;
		user.value = userId;
		user.textContent = userName;
		var date = row.cells[8].firstChild;
		date.value = new Date();
		date.textContent = date.value.getDate()+'/'+date.value.getMonth()+'/'+date.value.getFullYear()+'  '+date.value.getHours()+':'+date.value.getMinutes()+':'+date.value.getSeconds() ;
		date.value = date.value.getTime();
		var link = row.cells[9].firstChild;
		link.textContent = "Confirmed";
		link.onclick = "";
	}
	
	function removeRow(id){
		var row = id.parentNode.parentNode;
		var body = row.parentNode;
		body.removeChild(row);
		sumEarn();
		sumBill();
	}
	
	function checkEstimated(id){
		var row = id.parentNode.parentNode;
		var bill = row.cells[3].firstChild;
		var confirm = row.cells[9].firstChild;
		if (id.checked == true){
			bill.value = "0";
			confirm.hidden = true;
			bill.disabled = true;
		}else{
			confirm.hidden = false;
			bill.disabled = false;
		}
	}
	
	function save(){
		var toCharge = "";
		
		var table = $('#accruedList');
		table.find('tbody').find("#accruedRow").each(function() {
			var year = this.cells[0].firstChild.value;
			var month = this.cells[1].firstChild.value;
			var earn = this.cells[2].firstChild.value;
			var bill = this.cells[3].firstChild.value;
			var estimated = this.cells[4].firstChild.checked;
			var comment = this.cells[5].firstChild.value;
			var user = this.cells[7].firstChild.value;
			var date = this.cells[8].firstChild.value;
			
			toCharge = toCharge + year +','+ month + ','+earn + ','+bill + ','+estimated + ','+comment + ','+user +','+date+';';
		 });
		document.getElementById("chargedAccueds").value = toCharge;
	}
	
	function sumTotals(){
		var totalEarn = 0;
		var totalBill = 0;
		
		var table = $('#accruedList');
		table.find('tbody').find("tr").each(function() {
			var earn = parseFloat(this.cells[2].textContent);
			var bill = parseFloat(this.cells[3].textContent);
			
			totalEarn = totalEarn + earn;
			totalBill = totalBill +bill;
		});
		
		document.getElementById("totalEarn").textContent = totalEarn;
		document.getElementById("totalBill").textContent = totalBill;
	}
	
	function sumEarn(){
		var totalEarn = 0 ;
		
		var table = $('#accruedList');
		table.find('tbody').find("tr").each(function() {
			var earn = parseFloat(this.cells[2].textContent);
			if(isNaN(earn)){
				earn = parseFloat(this.cells[2].firstChild.value);
				if(isNaN(earn)){
					earn = 0;
				}
			}
			
			totalEarn = totalEarn + earn;
		});
		document.getElementById("totalEarn").textContent = totalEarn;
	}
	
	function sumBill(){
		var totalBill = 0 ;
		
		var table = $('#accruedList');
		table.find('tbody').find("tr").each(function() {
			var bill = parseFloat(this.cells[3].textContent);
			if(isNaN(bill)){
				bill = parseFloat(this.cells[3].firstChild.value);
				if(isNaN(bill)){
					bill = 0;
				}
			}
			
			totalBill = totalBill + bill;
		});
		document.getElementById("totalBill").textContent = totalBill;
	}
		
	$(document).ready(function() {
		sumTotals();
	});
</script>

<script type="text/javascript">
	function showDialog(id) {
		$(id).dialog('open');
		return false;
	}
	
	$(document).ready(function() {

		// Dialog			
		$("div[id^='dialog']").dialog({
			autoOpen : false,
			modal : true,
			draggable : false,
			resizable : false,
			width : 500,
			closeText: 'hide',
			height : 'auto',
			zIndex:0,
			hide: { effect: 'drop', direction: "down" },
			show: { effect: 'drop', direction: "up" },
			open: function(event, ui) {
				$(".ui-dialog-titlebar").hide();
                $(".ui-dialog-titlebar-close").hide();
    			}
		});
		
		// 				$("div[id^='dialog']").dialog('widget').find(
		// 						".ui-dialog-titlebar").hide();
		
	});
	
	
</script>
<s:form cssClass="formClass">
	<s:hidden name="loggedUser" id="loggedUser"/>
	<s:hidden name="loggedUserId" id="loggedUserId"/>
	<s:hidden name="chargedAccueds" id="chargedAccueds"/>

	<table>
		<tr>
			<td><table><sx:autocompleter list="allProjectsList" listValue="name"
					searchType="startword" listKey="id" showDownArrow="false"
					keyName="selectedProjectId" name="selectedProjectName"
					label="Project Name" /></table></td>
			<td align="left"><s:submit action="AccrualAction_filterAccruals" key="Search" cssClass="btn"/></td>
		</tr>
	</table>

	
	<s:if test="selectedProjectId != null">
	
	<table align="right"><tr><td><input type="button" class="buttonAdd" value="Add" onclick="javascript: addAccrued();"></td></tr></table>
	
	<display:table id="accruedList" name="accruedList" requestURI="AccrualAction_filterAccruals" 
		class="listable" defaultsort="1" defaultorder="ascending" cellpadding="0" cellspacing="0">
		<display:setProperty name="basic.msg.empty_list_row" value=" " />
		<display:column property="year" title="Year" style="width: 5%;"/>
		<display:column property="month" title="Month" style="width: 5%;"/>
		<display:column property="earn" title="Earn"/>
		<display:column property="bill" title="Bill"/>
		<display:column property="formatedEstimated" title="Estimated" style="width: 5%;"/>
		<display:column property="comment" title="Comment"/>
		<display:column title="Reference"/>
		<display:column property="confirmation.user.person.user.userName" title="User"/>
		<display:column property="confirmation.date.time" format="{0,date,dd/MM/yyyy hh:mm:ss}" title="Date"/>
		<display:column title="Confirmation"/>
		<display:column title="Remove"/>

		<display:footer media="html">
			<tr class="even" id="totalFooter">
				<td colspan="2" style="text-align: right;" ><label><b>Total:</b></label></td>
				<td style="text-align: right;"><label id="totalEarn"></label></td>
				<td style="text-align: right;"><label id="totalBill"></label></td>
			</tr>
		</display:footer>
	</display:table>
		
	<table width="100%">
		<tr>
			<td width="50%" align="right"><table><s:submit action="AccrualAction_save" key="Save"
						cssClass="btn" id="okbtn" style="text-align: center"  onclick="javascript: save()"/>
						</table>
			</td>
			<td width="50%" align="left"><table><s:submit action="AccrualAction_filterAccruals" key="Cancel"
						cssClass="btn" id="okbtn" style="text-align: center" />
						</table>
						</td>
		</tr>
	</table>
	
	</s:if>
</s:form>